<!-- 备案项目查询 -->
<template>
  <div class="home-page-content">
    <h3>备案项目查询</h3>
    <Form :model="formData" ref="FormRef" class="form-reset">
      <Row :gutter="30">
        <Col span="8">
          <CardMain itemName="公司名称">
            <FormItem prop="companyName">
              <Input
                v-model="formData.companyName"
                clearable 
                placeholder="请输入公司名称"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="8">
          <CardMain itemName="项目名称">
            <FormItem prop="projectName">
              <Input
                v-model="formData.projectName"
                clearable 
                placeholder="请输入项目名称"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="8">
          <CardMain itemName="产业标记">
            <FormItem prop="serviceTypeName">
              <Input
                v-model="formData.serviceTypeName"
                clearable 
                placeholder="请输入产业标记"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="12">
          <CardMain itemName="组织范围">
            <FormItem prop="parentName">
              <CompanySelect
                :companyId.sync="formData.parentId"
                :companyChangeId="formData.parentId"
                isMargin
              />
              <Input
                v-model="formData.parentName"
                clearable 
                placeholder="搜索关键词"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="12">
          <div class="action-search-btn">
            <Button type="primary" @click="queryList()">查询</Button>
            <Button type="primary" @click="formReset()">重置</Button>
          </div>
        </Col>
      </Row>
    </Form>
    <Row class="main-box">
      <Col span="24">
        <Table :columns="columns" :data="listData" :loading="isLoading">
          <template slot-scope="{ row }" slot="serviceArea">
            {{ serviceAreaFn(row.serviceArea) }}
          </template>
          <template slot-scope="{ row }" slot="serviceType">
            {{ serviceTypeFn(row.serviceType) }}
          </template>
        </Table>
      </Col>
    </Row>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script type="text/javascript">
import ExpandTable from "./expandTable.vue";

import { CompanyBusinessInfoPage } from "@/api/enterpriseInforManage.js";
import { returnStr } from "@/libs/util.js";

export default {
  name: "enterpriseInforInquiry",
  components: { ExpandTable },
  data() {
    return {
      formData: {
        companyName: "",
        projectName: "",
        serviceTypeName: "",
        parentId: "",
        parentName: "",
        page: 1,
        size: 10,
      },
      columns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(ExpandTable, {
              props: {
                row: params.row,
                projectName:this.formData.projectName
              },
            });
          },
        },
        {
          title: "公司名称",
          key: "companyName",
        },
        {
          title: "上级组织",
          key: "parentName",
        },
        {
          title: "公司住所",
          key: "companyAddress",
        },
        {
          title: "地区",
          slot: "serviceArea",
        },
        {
          title: "产业标记",
          slot: "serviceType",
        },
      ],
      listData: [],
      total: 0,
      isLoading: false,
    };
  },
  methods: {
    pageSizeChange(row) {
      this.companyBusinessInfoPageData();
    },
    async companyBusinessInfoPageData() {
      this.isLoading = true;
      let data = await CompanyBusinessInfoPage(this.formData);
      this.listData = data.data;
      this.total = data.total;
      this.isLoading = false;
    },
    queryList() {
      this.formData.page = 1;
      this.companyBusinessInfoPageData();
    },
    serviceAreaFn(data) {
      if (!data) return "";
      return returnStr(data, "provinceName", "cityName");
    },
    serviceTypeFn(data) {
      if (!data) return "";
      return returnStr(data, "serviceTypeName");
    },
    formReset() {
      this.formData.parentId = "";
      this.$refs.FormRef.resetFields();
      this.companyBusinessInfoPageData();
    },
    // 查看详情
    viewDetail(row) {
      console.log(row, "row");
      this.$router.push({
        path: "/enterpriseInforDetail",
        query: {
          id: row.id,
        },
      });
    },
  },
  mounted() {
    this.companyBusinessInfoPageData();
  },
};
</script>

<style lang="less" scoped>
.home-index-content {
  h3 {
    font-size: 18px;
  }
}

.company-select {
  margin-right: 10px;
}
</style>
